<template>
	<view class="content">
		<search-buttom title="推荐"></search-buttom>
		<my-swiper></my-swiper>
		<!-- noticeList：通知数组 colors：设置文字颜色  @click:公告栏条目点击事件 -->
		<cc-noticeBar class="noticeBar" :noticeList="noticeData" colors="olive"></cc-noticeBar>
		<!-- 推荐 -->
		<view class="select">
			<common-title>
				<template #name>每日推荐</template>
				<template #custom>
					<view class="date">
						<uni-icons type="calendar" size="18"></uni-icons>
						<view class="text">
							<uni-dateformat :date="Date.now()" format="dd日"></uni-dateformat>
						</view>
					</view>
				</template>
				
			</common-title>
			<view class="tuijian">
				<hm-news-card  v-for="(item,index) in newArticleData" :options="item" :key="index"></hm-news-card>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {apiGetNotice,apiGetNewArticle} from '@/api/articleApi.js'
	
	const noticeData = ref([])
	async function getApiGetNotice(){
		const {data} = await apiGetNotice()
		noticeData.value = data
	}
	const newArticleData = ref([])
	async function getApiGetNewArticle(){
		const {data} = await apiGetNewArticle()
		newArticleData.value = data
	}
	
getApiGetNewArticle()
getApiGetNotice()
</script>

<style lang="scss" scoped>
	.content {
		background:
			linear-gradient(to bottom, transparent, #fff 400rpx),
			linear-gradient(to right, #beecd8 20%, #F4E2D8);
	}

	.select {
		.date {
			color: #28b389;
			display: flex;
			align-items: center;

			.text {
				margin-left: 5rpx;
			}
		}
	}
</style>